<template>
  <div id="app">
    <div id="nav">
      <img src="./assets/logo-img_u1.png" height="40" alt="logo" />
      <span id="nav-btn-group">
        <i class="el-icon-setting" @click="openSetting"></i>
        <router-link to="/about"><i class="el-icon-user"></i></router-link>
      </span>
    </div>
    <router-view />
    <el-dialog
      title="全局配置"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <span>图表主题</span>
      <el-radio-group v-model="theme" size="mini">
        <el-radio-button label="light"></el-radio-button>
        <el-radio-button label="dark"></el-radio-button>
        <el-radio-button label="infographic"></el-radio-button>
        <el-radio-button label="macarons"></el-radio-button>
        <el-radio-button label="roma"></el-radio-button>
        <el-radio-button label="shine"></el-radio-button>
        <el-radio-button label="vintage"></el-radio-button>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="hanleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// infographic, macarons, roma, shine, vintage
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      dialogVisible: false,
      theme: this.stateTheme || "light",
    };
  },
  computed: {
    ...mapState({
      stateTheme: (state) => state.theme,
    }),
  },
  methods: {
    openSetting() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    hanleSubmit() {
      this.dialogVisible = false;
      this.setTheme({ theme: this.theme });
    },
    ...mapMutations(["setTheme"]),
  },
};
</script>

<style lang="less">
body {
  padding: 0;
  margin: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  text-align: left;
  vertical-align: top;
  position: relative;
  #nav-btn-group {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 15px;
    font-size: 24px;
    line-height: 40px;
    vertical-align: top;
    i {
      cursor: pointer;
    }
  }
  img {
    cursor: pointer;
  }
}
</style>
